<template>
    <!-- 个性推荐 -->
    <div class="RecommendCom">
        <!-- 轮播图 -->
        <div class="carousel">
            <el-carousel trigger="click" height="200px"  type="card">
                <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                    <img :src="item.imageUrl" alt="" class="carouselImg">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 推荐歌单 -->
        <div class="RecommendSongSheet">
            <div class="title">
                <span>推荐歌单</span>
                <i class="iconfont big-icon-2"></i>
            </div>
            <ul>
                <li
                    @mouseenter="RecommendMouseenter(item)"
                    @mouseleave="RecommendMouseleave()"
                    @click="songSheetClick(item,'推荐歌单')"
                    v-for="(item,index) in personalizedList" 
                    :key="index">
                    <div class="playCount">
                        <i class="iconfont big-bofang"></i>
                        <span>{{Math.ceil(item.playCount/10000)}}万</span>
                    </div>
                    <img :src="item.picUrl" alt="">
                    <div :class="mouseFlag==item.id? 'bfBthAvtive':'bfBth'">
                        <i class="iconfont big-bofang"></i>
                    </div>
                    <div class="personaName">{{item.name}}</div>
                </li>
            </ul>
        </div>
        <!-- 独家放送 -->
        <div class="RecommendSongSheet privatecontent">
            <div class="title">
                <span>{{privatecontentName}}</span>
                <i class="iconfont big-icon-2"></i>
            </div>
            <ul>
                <li
                    @mouseenter="RecommendMouseenter(item)"
                    @mouseleave="RecommendMouseleave()"
                    @click="songSheetClick(item,'独家放送')"
                    v-for="(item,index) in privatecontentList" 
                    :key="index">
                    <img :src="item.sPicUrl" alt="">
                    <div :class="mouseFlag==item.id? 'bfBthAvtive':'bfBth'">
                        <i class="iconfont big-bofang"></i>
                    </div>
                    <div class="personaName">{{item.name}}</div>
                </li>
            </ul>
        </div>
        <!-- 推荐MV -->
        <div class="RecommendSongSheet personalized">
            <div class="title">
                <span>推荐MV</span>
                <i class="iconfont big-icon-2"></i>
            </div>
            <ul>
                <li
                    @mouseenter="RecommendMouseenter(item)"
                    @mouseleave="RecommendMouseleave()"
                    @click="songSheetClick(item,'推荐MV')"
                    v-for="(item,index) in personalizedMv" 
                    :key="index">
                    <div class="playCount">
                        <i class="iconfont big-bofang"></i>
                        <span>{{Math.ceil(item.playCount/10000)}}万</span>
                    </div>
                    <img :src="item.picUrl" alt="">
                    <div :class="mouseFlag==item.id? 'bfBthAvtive':'bfBth'">
                        <i class="iconfont big-bofang"></i>
                    </div>
                    <div class="personaName">{{item.name}}</div>
                    <div class="personaName nameTwo">{{item.nameTwo}}</div>
                </li>
            </ul>
        </div>
        <!-- 主播电台 -->
        <div class="RecommendSongSheet djPersonalizeRecommend">
            <div class="title">
                <span>主播电台</span>
                <i class="iconfont big-icon-2"></i>
            </div>
            <ul>
                <li
                    @mouseenter="RecommendMouseenter(item)"
                    @mouseleave="RecommendMouseleave()"
                    @click="songSheetClick(item,'独家放送')"
                    v-for="(item,index) in djPersonalizeRecommend" 
                    :key="index">
                    <img :src="item.picUrl" alt="">
                    <div :class="mouseFlag==item.id? 'bfBthAvtive':'bfBth'">
                        <i class="iconfont big-bofang"></i>
                    </div>
                    <div class="personaName">{{item.name}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            bannerList:[],
            personalizedList:[],
            mouseFlag:"",
            privatecontentName:"",
            privatecontentList:[],
            personalizedMv:[],
            djPersonalizeRecommend:[],
        }
    },
    mounted(){
        this.getCarousel();
        this.getPersonalized();
        this.getPrivatecontent();
        this.getPersonalizedMv();
        this.getDjPersonalizeRecommend();
    },
    methods:{
        // 获取轮播图
        getCarousel(){
            this.$axios.get('/banner').then(res=>{
                if(200==res.data.code){
                    this.bannerList = res.data.banners;
                }
            })
        },
        // 获取推荐歌单数据
        getPersonalized(){
            this.$axios.get('/personalized?limit=10').then(res=>{
                if(200==res.data.code){
                    this.personalizedList = res.data.result;
                }
            })
        },
        // 获取独家放送
        getPrivatecontent(){
            this.$axios.get('/personalized/privatecontent').then(res=>{
                if(200==res.data.code){
                    this.privatecontentName = res.data.name;
                    this.privatecontentList = res.data.result;
                }
            })
        },
        // 获取推荐MV
        getPersonalizedMv(){
            this.$axios.get('/personalized/mv').then(res=>{
                if(200==res.data.code){
                    res.data.result.map(item=>{
                        let str = [];
                        item.artists.forEach(i => {
                            str.push(i.name);
                        });
                        item.nameTwo = str.join('/');
                    })
                    this.personalizedMv = res.data.result;
                }
            })
        },
        // 获取主播电台
        getDjPersonalizeRecommend(){
            this.$axios.get('/dj/personalize/recommend').then(res=>{
                if(200==res.data.code){
                    this.djPersonalizeRecommend = res.data.data;
                }
            })
        },
        // 鼠标移入
        RecommendMouseenter(item){
            this.mouseFlag = item.id;
        },
        // 鼠标移出
        RecommendMouseleave(){
            this.mouseFlag = "";
        },
        // 鼠标点击歌单
        songSheetClick(item,type){
            switch (type) {
                case '推荐歌单':{
                    this.$router.push('/SongDetails')
                    localStorage.setItem('songItem',JSON.stringify(item));
                    break;
                }
                case '独家放送':{

                    break;
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
@import "./RecommendCom.scss";
</style>